<template>
	<view class="guest-info-container">
		<view class="form-item">
			<text class="label">房间数</text>
			<input class="input" type="number" v-model="fiterData.Rooms" min="1" placeholder="请输入房间数" @blur="validateRooms" />
		</view>
		<view class="form-item">
			<text class="label">成人 <text class="orange">(每间)</text></text>
			<input class="input" type="number" v-model="fiterData.AdultGuests" min="1" placeholder="请输入每间成人数量" @blur="validateAdults" />
		</view>
		<view class="form-item">
			<text class="label">儿童 <text class="orange">(每间)</text></text>
			<input class="input" type="number" v-model="fiterData.ChildrenGuests" min="0" placeholder="请输入每间儿童数量" @blur="validateChildren" />
		</view>
		<view v-if="Number(fiterData.ChildrenGuests) >= 1">
			<view class="form-item" v-for="(item, index) in Number(fiterData.ChildrenGuests)" :key="index">
				<text class="label">儿童{{index+1}}年龄</text>
				<input class="input" type="number" v-model="childrenAgesArray[index]" placeholder="请输入儿童年龄" min="0" @input="updateChildrenAges" />
			</view>
		</view>
		<view class="tips">
			入住人数为每间入住人数，非总人数
			多人入住请关注加床政策
		</view>
	</view>
</template>

<script setup>
	import {
		ref, watch
	} from 'vue';
	const props = defineProps({
		fiterData:{
			Rooms:'',
			AdultGuests:'',
			ChildrenGuests:'',
			ChildrenAges:''
		}
	})

	const emit = defineEmits('close')
	const handleClose = () => {
		emit('close')
	}
	
	// 儿童年龄数组
	const childrenAgesArray = ref([]);
	
	// 初始化儿童年龄数组
	const initChildrenAges = () => {
		if (props.fiterData.ChildrenAges) {
			// 如果已有儿童年龄数据，将字符串转换为数组
			childrenAgesArray.value = props.fiterData.ChildrenAges.split(',');
		}
	}
	
	// 页面加载时初始化
	initChildrenAges();
	
	// 监听儿童数量变化，调整儿童年龄数组长度
	watch(() => props.fiterData.ChildrenGuests, (newVal) => {
		const count = Number(newVal) || 0;
		// 调整数组长度以匹配儿童数量
		if (count > childrenAgesArray.value.length) {
			// 如果儿童数量增加，添加新的空位
			while (childrenAgesArray.value.length < count) {
				childrenAgesArray.value.push('');
			}
		} else if (count < childrenAgesArray.value.length) {
			// 如果儿童数量减少，移除多余的位置
			childrenAgesArray.value = childrenAgesArray.value.slice(0, count);
		}
		// 更新儿童年龄字符串
		updateChildrenAges();
	}, { immediate: true });
	
	// 更新儿童年龄到fiterData
	const updateChildrenAges = () => {
		// 验证每个儿童年龄不能为负数
		childrenAgesArray.value.forEach((age, index) => {
			if (age !== '' && Number(age) < 0) {
				childrenAgesArray.value[index] = '0';
				uni.showToast({
					title: '儿童年龄不能为负数',
					icon: 'none'
				});
			}
		});
		// 将数组转换为逗号分隔的字符串
		props.fiterData.ChildrenAges = childrenAgesArray.value.join(',');
	}
	
	// 验证房间数必须大于等于1
	const validateRooms = () => {
		if (props.fiterData.Rooms === '' || props.fiterData.Rooms === null) return;
		const value = Number(props.fiterData.Rooms);
		if (value < 1) {
			props.fiterData.Rooms = 1;
			uni.showToast({
				title: '房间数不能小于1',
				icon: 'none'
			});
		}
	}
	
	// 验证成人数必须大于等于1
	const validateAdults = () => {
		if (props.fiterData.AdultGuests === '' || props.fiterData.AdultGuests === null) return;
		const value = Number(props.fiterData.AdultGuests);
		if (value < 1) {
			props.fiterData.AdultGuests = 1;
			uni.showToast({
				title: '成人数不能小于1',
				icon: 'none'
			});
		}
	}
	
	// 验证儿童数不能为负数
	const validateChildren = () => {
		if (props.fiterData.ChildrenGuests === '' || props.fiterData.ChildrenGuests === null) return;
		const value = Number(props.fiterData.ChildrenGuests);
		if (value < 0) {
			props.fiterData.ChildrenGuests = 0;
			uni.showToast({
				title: '儿童数不能为负数',
				icon: 'none'
			});
		}
	}
</script>

<style scoped lang="scss">
	.guest-info-container {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0 ;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eee;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-icon {
		font-size: 36rpx;
		color: #999;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.label {
		width: 150rpx;
		font-size: 28rpx;
		color: #333;
	}

	.orange {
		color: #ff6600;
	}

	.input {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.tips {
		font-size: 26rpx;
		color: #ff6600;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
</style>